import base from "../base.js";
import cinemasApi from "../../api/cinemas.js"
export default class extends base {
    constructor(props) {
        super(props);
        this.data = {
            cinema: {
                _id: props._id
            }
        };
    }
    render() {
        this.$el.html(`
        <div>
          <h1 style="text-align:center">上传影院图片</h1>
          <table>
           <tr>
             <div class="layui-form-item">
               <label class="layui-form-label">影院名:</label>
               <span class="name" style="display:inline-block; padding-top:9px"></span>
             </div>
           </tr>
           <tr>
             <div class="layui-form-item">
              <label class="layui-form-label">影院图片:</label>
               <button type="button" class="layui-btn" id="test1">
               <i class="layui-icon">&#xe67c;</i>上传影院图片
               </button>  
              </div>
           </tr>
           <tr>
             <div class="imgs" style="margin:30px 30px;padding:10px;border:3px dashed #999999">这里是海报图片</div>
           </tr>
          </table>
        </div>
        `);
        this.nameEle = $(".name");
        this.imgsEle = $(".imgs");
    }
    handle() {
        var upload = layui.upload;
        //执行实例
        var uploadInst = upload.render({
            elem: '#test1' //绑定元素
            , url: '/resource/cinemas/addImgs', //上传接口
            multiple: true
            , data: {
                _id: () => {
                    return this.data.cinema._id;
                }
            },
            done: res => {
                this.data.cinema = res;
                console.log(this.data.cinema);
                this.rerender();
            }
        });
        this.imgsEle.on("click", "img", e => {
            const url = e.target.src.replace("http://localhost:3002/","");
            const _id = this.data.cinema._id;
            var layer = layui.layer;
            layer.open({
                content: '是否删除该图片？'
                , btn: ['确定', '取消',]
                , yes: async (index, layero) => {
                    this.data.cinema = await cinemasApi.deleteimg({ _id, url });
                    this.rerender();
                    layer.close(index);
                }
            });
        })
    }
    async getCinema() {
        this.data.cinema = await cinemasApi.getOne(this.data.cinema._id);
        this.rerender();
    }
    rerender() {
        const { name, _id, imgs } = this.data.cinema;
        this.nameEle.html(name);
        const imgsStr = _.map(imgs, (v, k) => {
            return `<img _id="${_id}" style="width:200px;" src="http://localhost:3002/${v}">`
        }).join("");
        this.imgsEle.html(imgsStr);
    }
    mounted() {
        this.getCinema();
    }
}